<template>
  <div class="screen-main" ref="screen">
    <div class="header-box">
      <img :src="headerBg" alt="header" />
      <div class="header-container">
        <div class="left-text">{{ timeNow }}</div>
        <div class="center-text" @click="toScreenFull">
          iTools数据可视化大屏
        </div>
        <div class="right-text">{{ weekDay }}</div>
      </div>
    </div>
    <div class="indicators-box">
      <div class="indicators-header">核心指标</div>
      <img :src="indicatorsImg" alt="indicators" />
      <div class="indicators-container">
        <indicators-data
          :indicators-url="hostImg"
          :indicators-title="hostTitle"
          :indicators-data="hostNum"
        ></indicators-data>
        <indicators-data
          :indicators-url="hostImg"
          :indicators-title="workTitle"
          :indicators-data="workNum"
        ></indicators-data>
        <indicators-data
          :indicators-url="hostImg"
          :indicators-title="repoTitle"
          :indicators-data="repoNum"
        ></indicators-data>
        <indicators-data
          :indicators-url="hostImg"
          :indicators-title="softTitle"
          :indicators-data="softNum"
        ></indicators-data>
        <indicators-data
          :indicators-url="hostImg"
          :indicators-title="imageTitle"
          :indicators-data="imageNum"
        ></indicators-data>
      </div>
    </div>
    <div class="task-box">
      <div class="task-container">
        <div class="task-header">升级任务</div>
        <img class="task-item" :src="taskImg" alt="" />
        <div class="task-chart">
          <donut-chart
            :idName="firstIdName"
            :xData="firstXData"
            :legendColor="firstLegendColor"
            :graphicData="firstTotal"
          />
        </div>
      </div>
      <div class="task-container">
        <div class="task-header">安装任务</div>
        <img class="task-item" :src="taskImg" alt="" />
        <div class="task-chart">
          <donut-chart
            :idName="secondIdName"
            :xData="secondXData"
            :legendColor="secondLegendColor"
            :graphicData="secondTotal"
          />
        </div>
      </div>
      <div class="task-container">
        <div class="task-header-long">cve漏洞修复</div>
        <img class="task-item" :src="taskImg" alt="" />
        <div class="task-chart">
          <donut-chart
            :idName="thirdIdName"
            :xData="thirdXData"
            :legendColor="thirdLegendColor"
            :graphicData="thirdTotal"
          />
        </div>
      </div>
      <div class="task-container">
        <div class="task-header-short">告警</div>
        <img class="task-item" :src="taskImg" alt="" />
        <div class="task-chart">
          <donut-chart
            :idName="forthIdName"
            :xData="forthXData"
            :legendColor="forthLegendColor"
            :graphicData="forthTotal"
          />
        </div>
      </div>
    </div>
    <div class="table-box">
      <div class="table-container">
        <div class="table-header-long">兼容性分析图谱</div>
        <img :src="tableImg" alt="" />
        <div class="table-data">
          <scroll-table
            :table-header="compatibilityTableHeader"
            :table-data="compatibilityTableData"
          ></scroll-table>
        </div>
      </div>
      <div class="table-container">
        <div class="table-header-short">服务监控</div>
        <img :src="tableImg" alt="" />
        <div class="table-data">
          <scroll-table
            :table-header="monitorTableHeader"
            :table-data="monitorTableData"
          ></scroll-table>
        </div>
      </div>
    </div>
    <div class="float-btn" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
      <el-button
        v-show="screenFullBtn"
        icon="el-icon-full-screen"
        circle
        @click="hoverBtnClick()"
      ></el-button>
    </div>
    <j-hover-btn
      bgColor="#b2f2fc"
      :width="btnWidth"
      text="全屏"
      :btn-style="btnStyle"
      @hoverBtnClick="hoverBtnClick()"
    >
    </j-hover-btn>
  </div>
</template>

<script>
import screenFull from "screenfull";
import headerBg from "@/views/bigScreen/assets/images/titleImg.svg";
import indicatorsImg from "@/views/bigScreen/assets/images/indicatorsImg.svg";
import taskImg from "@/views/bigScreen/assets/images/taskImg.svg";
import tableImg from "@/views/bigScreen/assets/images/tableImg.svg";
import IndicatorsData from "@/views/bigScreen/components/IndicatorsData";
import DonutChart from "@/views/bigScreen/components/DonutChart";
import ScrollTable from "@/views/bigScreen/components/ScrollTable";
import hostImg from "@/views/bigScreen/assets/images/hostImg.svg";

export default {
  name: "index",
  components: {
    IndicatorsData,
    DonutChart,
    ScrollTable,
  },
  data() {
    return {
      screenFullBtn: true,
      btnWidth: 50,
      btnStyle: {
        fontSize: "18px",
        bottom: "30px",
        right: "40px",
      },
      headerBg: headerBg,
      indicatorsImg: indicatorsImg,
      taskImg: taskImg,
      tableImg: tableImg,
      timeNow: "",
      weekDay: "",
      hostImg: hostImg,
      hostTitle: "主机",
      hostNum: 0,
      workTitle: "模板",
      workNum: 0,
      repoTitle: "仓库源",
      repoNum: 0,
      softTitle: "软件包",
      softNum: 0,
      imageTitle: "镜像",
      imageNum: 0,
      firstIdName: "firstChart",
      firstXData: [
        { value: 0, name: "待执行" },
        { value: 0, name: "执行中" },
        { value: 0, name: "执行成功" },
        { value: 0, name: "执行失败" },
      ],
      firstTotal: 0,
      firstLegendColor: ["#7169F7", "#1B85FF", "#30F2FE", "#EA3B8F"],
      secondIdName: "secondChart",
      secondXData: [
        { value: 0, name: "待执行" },
        { value: 0, name: "执行中" },
        { value: 0, name: "执行成功" },
        { value: 0, name: "执行失败" },
      ],
      secondTotal: 0,
      secondLegendColor: ["#7169F7", "#1B85FF", "#30F2FE", "#EA3B8F"],
      thirdIdName: "thirdChart",
      thirdXData: [
        { value: 0, name: "待修复" },
        { value: 0, name: "处理中" },
        { value: 0, name: "已分析" },
      ],
      thirdTotal: 0,
      thirdLegendColor: ["#7169F7", "#1B85FF", "#30F2FE"],
      forthIdName: "forthChart",
      forthXData: [
        { value: 0, name: "提示" },
        { value: 0, name: "次要" },
        { value: 0, name: "重要" },
        { value: 0, name: "紧急" },
      ],
      forthTotal: 0,
      forthLegendColor: ["#F1C641", "#FF8B41", "#F34C6B", "#DF2F2F"],
      compatibilityTableHeader: [
        '<span style="color:#B2F2FC;">服务器IP</span>',
        '<span style="color:#B2F2FC;">冲突包</span>',
        '<span style="color:#B2F2FC;">升级包</span>',
        '<span style="color:#B2F2FC;">新装</span>',
        '<span style="color:#B2F2FC;">删除</span>',
      ],
      compatibilityTableData: [
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
        ["222.10.24.12", "12", "34", "2", "1"],
      ],
      monitorTableHeader: [
        '<span style="color:#B2F2FC;">服务器IP</span>',
        '<span style="color:#B2F2FC;">操作系统</span>',
        '<span style="color:#B2F2FC;">内存</span>',
        '<span style="color:#B2F2FC;">CPU核心数</span>',
        '<span style="color:#B2F2FC;">CPU使用率</span>',
        '<span style="color:#B2F2FC;">系统架构</span>',
      ],
      monitorTableData: [
        ["222.10.24.12", "centos7.2", "16G", "8", "54.2%", "x86"],
        ["222.10.24.12", "centos7.2", "16G", "8", "54.2%", "x86"],
        ["222.10.24.12", "centos7.2", "16G", "8", "54.2%", "x86"],
        ["222.10.24.12", "centos7.2", "16G", "8", "54.2%", "x86"],
        ["222.10.24.12", "centos7.2", "16G", "8", "54.2%", "x86"],
      ],
    };
  },
  created() {
    const self = this;
    this.getNowTime();
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.timer = setInterval(self.getNowTime, 1000);
  },
  mounted() {
    setTimeout(() => {
      this.screenFullBtn = false;
    }, 5000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    mouseEnter() {
      this.screenFullBtn = true;
    },
    mouseLeave() {
      this.screenFullBtn = false;
    },
    hoverBtnClick() {
      this.toScreenFull();
    },
    toScreenFull() {
      if (!screenFull.isEnabled) {
        this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
        return false;
      }
      screenFull.toggle();
    },
    getNowTime() {
      const nowTime = new Date();
      const y = nowTime.getFullYear();
      let M = nowTime.getMonth() + 1;
      M = M < 10 ? "0" + M : M;
      let d = nowTime.getDate();
      d = d < 10 ? "0" + d : d;
      let h = nowTime.getHours();
      h = h < 10 ? "0" + h : h;
      let m = nowTime.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = nowTime.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.timeNow = y + "/" + M + "/" + d + " " + h + ":" + m + ":" + s;
      this.weekDay = "星期" + "日一二三四五六".charAt(nowTime.getDay());
    },
  },
};
</script>

<style>
::-webkit-scrollbar {
  width: 0;
}
</style>
<style lang="scss" scoped>
.screen-main {
  font-family: 楷体;
  user-select: none;
  width: 100%;
  height: 1080px;
  background-color: #02004c;

  .header-container {
    color: #ffffff;
    display: flex;

    .left-text {
      width: 25%;
      font-size: 18px;
      margin-top: -52px;
      text-align: center;
    }

    .center-text {
      width: 50%;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: 5px;
      margin-top: -70px;
      text-align: center;
      cursor: pointer;
    }

    .right-text {
      width: 25%;
      font-size: 18px;
      letter-spacing: 5px;
      margin-top: -52px;
      text-align: center;
    }
  }

  .indicators-box {
    width: 96%;
    height: 160px;
    margin: 50px auto;

    .indicators-header {
      color: #b2f2fc;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 3px;
      margin-bottom: -30px;
      margin-left: 30px;
    }

    .indicators-container {
      display: flex;
      justify-content: space-between;
      padding: 10px 30px;
      margin-top: -75px;
    }
  }

  .task-box {
    width: 96%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .task-container {
      width: 400px;
      height: 100%;

      .task-header {
        color: #b2f2fc;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: -35px;
        margin-left: 30px;
      }

      .task-header-long {
        color: #b2f2fc;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: -35px;
        margin-left: 15px;
      }

      .task-header-short {
        color: #b2f2fc;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: -35px;
        margin-left: 50px;
      }

      .task-chart {
        margin-top: -200px;
        margin-left: -120px;
      }
    }
  }

  .table-box {
    width: 96%;
    margin: 60px auto auto auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .table-container {
      width: 880px;
      height: 100%;

      .table-header-long {
        color: #b2f2fc;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: -35px;
        margin-left: 32px;
      }

      .table-header-short {
        color: #b2f2fc;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 3px;
        margin-bottom: -35px;
        margin-left: 65px;
      }

      .table-data {
        margin-top: -360px;
        margin-left: 60px;
      }
    }
  }

  .float-btn {
    position: fixed;
    bottom: 30px;
    left: 40px;
    width: 50px;
    height: 50px;
  }
}
</style>
